<template>
  <div class="indicator" @click="handlePress" @mouseover="handleOver" @mouseleave="handleLeave">
    <div class="qty_view">
      <div class="qty-ratio">{{ hydQty.toFixed(2) }}</div>
    </div>
    <span class="press-num">{{ press.toFixed(0) }}</span>
  </div>
</template>

<script setup>
import { computed, onMounted, defineProps, watch } from 'vue'
import { useStore } from 'vuex'

const props = defineProps({
  direction: {
    //标识指示的是哪个系统
    type: String,
    default: 'left'
  },
  hydQty: {
    type: Number,
    default: 0.96
  }
})

let Switch = false

const store = useStore()

const press = computed(() => {
  if (props.direction == 'left') {
    return store.getters['hyd/lPress']
  } else if (props.direction == 'right') {
    return store.getters['hyd/rPress']
  } else if (props.direction == 'center') {
    return store.getters['hyd/cPress']
  }
})

watch(press, (newVal) => {
  if (press.value == 0) {
    Switch = true
  }
  if (press.value == 3000) {
    Switch = false
  }
})

onMounted(() => {
  if (press.value == 0) {
    Switch = true
  }
})

const handleOver = () => {
  if (props.direction === 'left') {
    store.dispatch('hyd/stopLPressInterval')
  } else if (props.direction === 'right') {
    store.dispatch('hyd/stopRPressInterval')
  } else if (props.direction === 'center') {
    store.dispatch('hyd/stopCPressInterval')
  }
}

const handleLeave = () => {
  if (props.direction === 'left') {
    store.dispatch('hyd/restartLPressInterval')
  } else if (props.direction === 'right') {
    store.dispatch('hyd/restartRPressInterval')
  } else if (props.direction === 'center') {
    store.dispatch('hyd/restartCPressInterval')
  }
}

const handlePress = () => {
  if (props.direction === 'left') {
    if (Switch) {
      store.dispatch('hyd/increaseLPress')
      Switch = false
    } else {
      store.dispatch('hyd/decreaseLPress')
      Switch = true
    }
  } else if (props.direction === 'right') {
    if (Switch) {
      store.dispatch('hyd/increaseRPress')
      Switch = false
    } else {
      store.dispatch('hyd/decreaseRPress')
      Switch = true
    }
  } else if (props.direction === 'center') {
    if (Switch) {
      store.dispatch('hyd/increaseCPress')
      Switch = false
    } else {
      store.dispatch('hyd/decreaseCPress')
      Switch = true
    }
  }
}
</script>

<style scoped>
.indicator {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  flex-direction: column;
  cursor: pointer;
}

.indicator:hover .qty_view {
  border: 3px solid rgb(8, 255, 66);
}

.indicator:hover .press-num {
  color: rgb(8, 255, 66);
}

.qty_view {
  margin-left: 20px;
  width: 120px;
  height: 50px;
  border: 2px solid rgb(8, 214, 255);
  background-color: rgb(66, 66, 81);
  display: flex;
  justify-content: center;
  align-items: center;
}

.qty-ratio {
  width: 70px;
  height: 35px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.press-num {
  margin-left: 20px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
}
</style>
